<template>
  <div class="middleView">
    <div class="online-supervision">
      <div class="common-img"><el-image :src="leftSrc" fit="contain"></el-image></div>
      <div>在线督查</div>
      <div class="common-img right-box">
        <el-image :src="rightSrc" @click.native="onlineClick" fit="contain" class="img-view"></el-image>
      </div>
    </div>
    <div v-if="isOnline" class="online-box">
      <!-- <el-image :src="onlineSrc"></el-image> -->
      <SearchView />
    </div>
    <div class="content-box">
      <div class="map-box">
        <el-image :src="mapSrc" class="map-image-view"></el-image>
        <el-popover
          v-for="(item, index) in list"
          :key="index"
          placement="right"
          width="300"
          trigger="click"
          popper-class="popover"
        >
          <DetailMiddle />
          <div slot="reference" class="logo-item" :style="item.style">
            <el-image :src="item.selSrc ? selItemSrc : itemSrc" fit="contain"></el-image>
          </div>
        </el-popover>

        <div class="text-item" style="left: 28%; top: 16%">
          <el-image :src="precinctObj.textSrc1"></el-image>
        </div>
        <div class="text-item" style="left: 6%; top: 53%">
          <el-image :src="precinctObj.textSrc2"></el-image>
        </div>
        <div class="text-item" style="left: 22%; top: 71%">
          <el-image :src="precinctObj.textSrc3"></el-image>
        </div>
        <div class="text-item" style="left: 63%; top: 74%">
          <el-image :src="precinctObj.textSrc4"></el-image>
        </div>
      </div>
    </div>
    <div class="legent-box">
      <div class="title-view">图例</div>
      <div v-for="(item, index) in legentList" :key="index" class="content-view">
        <!-- <div class="img-icon-box"><el-image :src="item.src" fit="contain"></el-image></div> -->
        <div class="img-icon-box">
          <SvgIcon :icon-class="item.src" class="img-box" :class="item.id == 2 ? 'selColor' : 'basicColor'" />
        </div>
        <div class="name-view" :class="{ commonVlueColor: item.name == '摄像头' }">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import DetailMiddle from "@/views/panoramicData/components/DetailMiddle"
import SearchView from "@/views/panoramicData/components/SearchView"
export default {
  components: { DetailMiddle, SearchView },
  props: {},
  data() {
    return {
      leftSrc: require("@/assets/img/house.png"),
      rightSrc: require("@/assets/img/vector.png"),
      legentList: [
        { name: "在逃人员", src: "door", id: 1 },
        { name: "摄像头", src: "camera", id: 2 },
        { name: "在线设备", src: "online", id: 3 },
        { name: "离线设备", src: "offline", id: 4 }
      ],
      mapSrc: require("@/assets/img/map-bg.png"),
      itemSrc: require("@/assets/img/blue-logo.png"),
      selItemSrc: require("@/assets/img/orange-logo.png"),
      precinctObj: {
        textSrc1: require("@/assets/img/hxocs-bg.png"),
        textSrc2: require("@/assets/img/cjpcs-bg.png"),
        textSrc3: require("@/assets/img/hgpcs-bg.png"),
        textSrc4: require("@/assets/img/sbpcs-bg.png")
      },
      list: [
        { selSrc: false, style: "left: 32%; top: 9%" },
        { selSrc: false, style: "left: 26%; top: 22%" },
        { selSrc: true, style: "left: 11%; top: 32%" },
        { selSrc: false, style: "left: 18%; top: 42%" },
        { selSrc: false, style: "left: 27%; top: 52%" },
        { selSrc: true, style: "left: 41%; top: 60%" },
        { selSrc: false, style: "left: 59%; top: 65%" }
      ],
      isOnline: false,
      onlineSrc: require("@/assets/img/search-bg.png")
    }
  },
  mounted() {},
  watch: {},
  methods: {
    onlineClick() {
      console.log("sssssssssss")
      this.isOnline = !this.isOnline
    }
  }
}
</script>

<style scoped lang="scss">
.middleView {
  width: 100%;
  height: 100%;
  // background: rgba(3, 10, 14, 0.7);
  margin: 0 40px;
  position: relative;
  .online-supervision {
    z-index: 2000;
    position: absolute;
    right: 60px;
    top: 0px;
    width: 189px;
    height: 51px;
    color: #01c2ff;
    font-size: 22px;
    box-sizing: border-box;
    background-image: url("/public/panoramicData/rectangle.png");
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    .common-img {
      width: 22px;
      height: 22px;
      text-align: center;
      margin-right: 5px;
    }
    .right-box {
      margin-left: 10px;
      margin-top: -4px;
      .el-image {
        width: 16px;
        height: 18px;

        cursor: pointer;
      }
    }
  }
  .online-box {
    width: 551px;
    height: 380px;
    position: absolute;
    top: 45px;
    right: -300px;
    z-index: 2000;
  }
  .content-box {
    width: calc(100% - 0px);
    // height: calc(90% - 0px);
    .map-box {
      // box-sizing: border-box;
      padding-top: 50px;
      padding-left: 10px;
      position: relative;
      .map-image-view {
        width: 82%;
      }
      .el-image {
        opacity: 0.75;
      }
      .logo-item {
        width: 32px;
        height: 80px;
        position: absolute;
        .el-image {
          width: 35px;
          height: 90px;
          opacity: 1;
        }
      }
      .text-item {
        width: 128px;
        height: 48px;
        position: absolute;
        .el-image {
          opacity: 1;
        }
      }
    }
  }
  .legent-box {
    position: absolute;
    bottom: -20px;
    right: 40px;
    width: 218px;
    height: 259px;
    background: rgba(0, 20, 35, 0.7);
    box-sizing: border-box;
    border: 2px solid #20426a;
    padding: 25px 30px;
    .title-view {
      width: 162px;
      height: 43px;
      line-height: 43px;
      position: absolute;
      top: -20px;
      left: calc(50% - 81px);
      background-image: url("/public/panoramicData/rectangleW162.png");
      background-position-x: center;
      background-repeat: no-repeat;
      background-size: contain;
      font-size: 24px;
      text-align: center;
      color: #01c2ff;
    }
    .content-view {
      color: #fff;
      height: 24px;
      margin-top: 25px;
      display: flex;
      align-items: center;
      .img-icon-box {
        display: flex;
        align-items: center;
      }
      .name-view {
        margin-left: 20px;
        font-size: 16px;
      }
      .el-image {
        width: 22px;
        height: 20px;
      }
    }
  }
}
.commonColor {
  color: rgb(255, 255, 255, 0.8);
}
.commonVlueColor {
  color: #28f1fa;
}
.svg-icon {
  width: 18px;
  height: 18px;
}
.selColor.svg-icon {
  fill: #28f1fa;
}
.basicColor.svg-icon {
  fill: #ffffff;
}
.fontSize20 {
  font-size: 20px;
  font-weight: 700;
}
</style>
<style lang="scss">
// 改变pop框颜色
.popover.el-popover {
  background: #0a1a34;
  border: 1px solid #48f6f0;
  border-radius: 0;
  padding: 0;
}
.el-popper[x-placement^="top"] .popper__arrow::after {
  border-top-color: #0a1a34;
}
.el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #0a1a34;
}
.el-popper[x-placement^="right"] .popper__arrow::after {
  border-right-color: #0a1a34;
}
.right-box {
  margin-left: 10px;
  .el-image {
    margin-top: 5px;
    cursor: pointer;
  }
}
</style>
